<template>
	<view class="page">
		<!-- 头部导航 -->
		<!-- <view class="headerBag">
			<image src="/static/icon-Get-into@3.png" class="back" @click="goBack"></image>
			<view class="heade_c">
				<text>生活商家运营人身份验证</text>
			</view>
		</view> -->

		<!-- 内容区域 -->
		<view class="wrapper font15">
			<!-- 信息输入框 -->
			<view class="inforBox">
				<view class="layouts displayflex">
					<view class="label-container">
						<text class="mustWrite">*</text>
						<text>法人姓名:</text>
					</view>
					<view class="input-container">
						<input v-model="formData.realname" type="text" placeholder="请输入本人姓名" class="input-field" />
					</view>
				</view>

				<view class="layouts displayflex">
					<view class="label-container">
						<text class="mustWrite">*</text>
						<text>身份证号:</text>
					</view>
					<view class="input-container">
						<input v-model="formData.idcardNum" type="text" placeholder="请输入本人有效身份证号" class="input-field" />
					</view>
				</view>
			</view>

			<!-- 协议勾选 -->
			<view class="id-card">
				<view class="agreement-container" @click="toggleAgreement">
					<!-- <text :class="['agreement-checkbox', isAgreed ? 'yuedu' : 'unread']"></text> -->
					<image :src="serverAddress + (isAgreed ? 'img/login/icon-dui.png' : 'img/check.png')"
						class="check-icon"></image>
					<text class="agreement-text">
						我已阅读并同意
						<text class="agreement-link" @click.stop="viewAgreement">《优享优品平台商家服务协议》</text>
						按照本协议中约定履行权利义务
					</text>
				</view>
			</view>

			<!-- 下一步按钮 -->
			<view class="nextStep" @click="nextStep">下一步</view>
		</view>
	</view>
</template>

<script>
	import {
		merchantApi
	} from '@/api/index.js'
	import {
		inject
	} from 'vue'
	export default {
		data() {
			return {
				serverAddress: inject('$serverAddress', ''),
				formData: {
					realname: '',
					idcardNum: ''
				},
				isAgreed: false,
				editId: '' // 编辑时的ID
			}
		},

		onLoad(options) {
			if (options.id) {
				this.editId = options.id
			}
			this.initData()
		},

		methods: {
			// 初始化数据
			async initData() {
				// 如果已经填写过，则自动填写
				const bussinessInfor = uni.getStorageSync('bussinessInfor')
				if (bussinessInfor && bussinessInfor.page1) {
					this.formData.realname = bussinessInfor.page1.realname
					this.formData.idcardNum = bussinessInfor.page1.id_number
				} else if (this.editId) {
					// 申请商家后台驳回后，修改提交过的信息
					try {
						const res = await merchantApi.getApplyList({
							id: this.editId
						})
						if (res.r === 0 && res.data.aplist) {
							res.data.aplist.forEach(item => {
								this.formData.realname = item.legal_name
								this.formData.idcardNum = item.legal_idnum
							})
						}
					} catch (error) {
						console.error('获取申请信息失败:', error)
					}
				}
			},

			// 返回上一页
			goBack() {
				uni.navigateBack()
			},

			// 切换协议勾选状态
			toggleAgreement() {
				this.isAgreed = !this.isAgreed
			},

			// 查看协议
			viewAgreement() {
				uni.setStorageSync('current_tag', 'sj_xy')
				uni.navigateTo({
					url: '/pages/identity/agreement'
				})
			},

			// 验证身份证号
			validateIdCard(idCard) {
				const regIdNo = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
				return regIdNo.test(idCard)
			},

			// 下一步
			nextStep() {
				// 验证姓名
				if (!this.formData.realname.trim()) {
					uni.showToast({
						title: '本人姓名不可为空',
						icon: 'none'
					})
					return
				}

				// 验证身份证号
				if (!this.validateIdCard(this.formData.idcardNum.trim())) {
					uni.showToast({
						title: '请填写正确的身份证号',
						icon: 'none'
					})
					return
				}

				// 验证协议勾选
				if (!this.isAgreed) {
					uni.showToast({
						title: '请勾选优享优品平台生活厂家服务协议',
						icon: 'none'
					})
					return
				}

				// 保存数据到本地存储
				let bussiness = {}
				bussiness.page1 = {
					realname: this.formData.realname,
					id_number: this.formData.idcardNum
				}

				const existingData = uni.getStorageSync('bussinessInfor')
				if (existingData) {
					if (existingData.page2) {
						bussiness.page2 = existingData.page2
					}
					if (existingData.page3) {
						bussiness.page3 = existingData.page3
					}
				}

				uni.setStorageSync('bussinessInfor', bussiness)

				// 跳转到下一页
				const nextUrl = this.editId ?
					`/pages/identity/writeBussinessInfor?id=${this.editId}` :
					'/pages/identity/writeBussinessInfor'

				uni.navigateTo({
					url: nextUrl
				})
			}
		}
	}
</script>

<style scoped>
	/* 重置样式 */
	.page {
		background: #eeeeee;
		min-height: 100vh;
	}

	/* 头部样式 */
	.headerBag {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		height: 88rpx;
		background: #fff;
		border-bottom: 1rpx solid #e8e8e8;
	}

	.back {
		position: absolute;
		left: 30rpx;
		width: 40rpx;
		height: 40rpx;
	}

	.heade_c text {
		font-size: 36rpx;
		font-weight: 500;
		color: #333;
	}

	/* 内容区域 */
	.wrapper {
		font-size: 30rpx;
	}

	.font15 {
		font-size: 30rpx;
	}

	/* 信息输入框 */
	.inforBox {
		position: relative;
		margin-top: 20rpx;
		padding: 0 30rpx;
		background: white;
		border-bottom: 1rpx solid #e8e8e8;
	}

	.layouts {
		height: 90rpx;
		line-height: 90rpx;
		border-bottom: 1rpx solid #e8e8e8;
	}

	.layouts:last-child {
		border-bottom: none;
	}

	.displayflex {
		display: flex;
		align-items: center;
	}

	.label-container {
		width: 30%;
		position: relative;
		margin-left: 30rpx;
	}

	.mustWrite {
		position: absolute;
		left: -20rpx;
		top: 5rpx;
		color: red;
		font-size: 30rpx;
	}

	.input-container {
		position: relative;
		width: 70%;
	}

	.input-field {
		height: 50rpx;
		line-height: 50rpx;
		width: 100%;
		color: #4b4b4b;
		font-size: 30rpx;
	}

	/* 协议区域 */
	.id-card {
		padding: 0 30rpx;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}

	.agreement-container {
		display: flex;
		align-items: flex-start;
		line-height: 1.5;
	}

	.check-icon {
		width: 25rpx;
		height: 25rpx;
		margin-right: 5rpx;
	}

	.agreement-checkbox {
		display: inline-block;
		width: 25rpx;
		height: 25rpx;
		margin-right: 18rpx;
		margin-top: 5rpx;
		flex-shrink: 0;
	}

	/* .yuedu {
		background: url('/static/icons/icon-dui.png') no-repeat center;
		background-size: 25rpx 25rpx;
	}

	.unread {
		background: url('/static/icons/check.png') no-repeat center;
		background-size: 25rpx 25rpx;
	} */

	.agreement-text {
		font-size: 24rpx;
		color: #8d8d8d;
		flex: 1;
	}

	.agreement-link {
		color: #37A962;
	}

	/* 下一步按钮 */
	.nextStep {
		width: 690rpx;
		line-height: 90rpx;
		height: 90rpx;
		color: white;
		background: #ff2e00;
		border-radius: 10rpx;
		text-align: center;
		margin: 0 auto;
		margin-top: 20rpx;
		font-size: 32rpx;
	}
</style>